<template>
  <div class="songlist">
    <div class="index" v-show="$route.meta.PaiHang">
      {{ String(idx + 1).padStart(2, "0") }}
    </div>

    <div class="song-info" @click="xiangqing(item)">
      <h3 class="song-name" :class="{ title: AudioplaysongId == item.id }">
        {{ item.name }}
      </h3>

      <div v-show="item.artists" class="songitem">
        <div class="SQ"></div>
        <span v-for="(itm, index) of item.artists" :key="index"
          >{{ itm.name }}
          <span v-if="index < item.artists.length - 1"> / </span>
        </span>
      </div>

      <div v-show="item.ar" class="songitem">
        <div class="SQ"></div>
        <span v-for="(itm, index) of item.ar" :key="index"
          >{{ itm.name }}
          <span v-if="index < item.ar.length - 1"> / </span>
        </span>
      </div>

      <div v-show="!item.ar && !item.artists" class="songitem">
        <div class="SQ"></div>
        <span v-for="(itm, index) of item.song?.artists" :key="index"
          >{{ itm.name }}
          <span v-if="index < item.song.artists.length - 1"> / </span>
        </span>
      </div>
    </div>

    <div class="jiaruliebiao">
      <span
        @click="$emit('addsonglist', item)"
        class="iconfont icon-jiarubofangliebiao"
        v-if="!BFtianjiashow"
      ></span>
      <span
        @click="$emit('delsong', item.id)"
        class="iconfont icon-shanchuliebiaoxiang"
        v-if="BFtianjiashow"
        style="color: rgba(255, 0, 0, 0.5)"
      ></span>
    </div>
    <div class="playicon" :class="{ playing: AudioplaysongId == item.id }">
      <!-- <img
        v-if="AudioplaysongId == item.id"
        src="../assets/bofang.gif"
        :class="{ playstop: playing }"
      /> -->
      <div
        class="anima"
        :class="{ playstop: playing }"
        v-show="AudioplaysongId == item.id"
      >
        <span></span><span></span><span></span><span></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: Object,
    idx: Number,
    AudioplaysongId: Number,
    playing: Boolean,
    songlist: Array,
  },
  data() {
    return {};
  },
  methods: {
    xiangqing(item) {
      console.log(item);
      this.$emit("AudioId", item);
    },
  },
  computed: {
    BFtianjiashow() {
      // 使用 some 方法检查数组中是否存在符合条件的元素
      console.log(this.songlist);

      return this.songlist.some((its) => {
        return its.id === this.item.id;
      });
    },
  },
  created() {},
};
</script>

<style lang="less" scoped>
@keyframes xxx {
  0% {
    transform: scaleY(1);
  }

  100% {
    transform: scaleY(0);
  }
}

.song-name {
  width: 70vw;
  overflow: hidden; /* 隐藏溢出的内容 */
  white-space: nowrap; /* 不换行 */
  text-overflow: ellipsis; /* 用省略号表示溢出的内容 */

  font-weight: 700;
  color: rgb(0, 0, 0);
}

.anima {
  width: 22px;
  height: 22px;
  display: flex;
  justify-content: space-around;

  // background-color: antiquewhite;
  span {
    display: block;
    width: 15%;
    height: 100%;
    background-color: red;
    animation: xxx 0.8s linear 0;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    transform-origin: bottom;
    animation-play-state: paused;

    &:nth-child(1) {
      animation-delay: 0s;
    }

    &:nth-child(2) {
      animation-delay: -0.4s;
    }

    &:nth-child(3) {
      animation-delay: -0.2s;
    }

    &:nth-child(4) {
      animation-delay: -0.6s;
    }
  }

  &.playstop {
    span {
      animation-play-state: running;
    }
  }
}

.songlist {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 0 12px;
  // border-bottom: 1px solid red;

  .index {
    // width: 30px;
    margin-right: 12px;
    text-align: center;
  }

  .song-info {
    flex: 1;
  }

  .playicon {
    background: url(../assets/iconsp.png) no-repeat -33px 0;
    background-size: 226px 128px;
    width: 30px;
    height: 30px;
    margin-left: 15px;
  }

  .playing {
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .title {
    font-weight: 700;
    color: red;
  }
}

.songitem {
  font-size: 12px;
  margin: 5px 0;

  .SQ {
    display: inline-block;
    width: 15px;
    height: 10px;
    // background-color: red;
    background: url("../assets/iconsp.png");
    background-size: 195px;
    margin-right: 5px;
  }
}
</style>